<template>
  <!-- 桥梁统计柱状图 -->
  <div class="bridgeCountBox" ref="countEchart"></div>
</template>

<script>
// import * as echarts from 'echarts'
import * as echarts from "echarts/core";
import { GridComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
// 被撞接口
import { getrammedBridge } from "../utils/apis";
echarts.use([GridComponent, CanvasRenderer]);
export default {
  data() {
    return {
      xData: [],
      yData: [],
    };
  },
  created() {
    // 近三年被撞桥梁
    this.getrammedBridgeFn();
  },
  methods: {
    getrammedBridgeFn() {
      getrammedBridge().then((res) => {
        console.log(30, res);
        let dataList = res.data;
        console.log(dataList);
        dataList.map((el) => {
          this.yData.push(el.bridgeName);
          this.xData.push(el.num);
        });
        this.$nextTick(() => {
          this.changeEchart();
        });
      });
    },
    changeEchart() {
      var option = {
        title: {
          text: "近三年被撞桥梁排名统计",
          left: "center",
          top: "16px",
          textStyle: {
            fontSize: "16px",
            color: "#000",
            fontWeight: "500",
          },
        },
        backgroundColor: "#fff",
        grid: [
          {
            //左侧的柱状图grid
            top: "50px",
            left: "16px",
            right: "16px",
            bottom: "30px",
            backgroundColor: "#fff",
            width: "auto", //图例宽度
            height: "auto", //图例高度
          },
        ],
        xAxis: [
          {
            //左侧柱状图的X轴
            gridIndex: 0, //x 轴所在的 grid 的索引
            show: false,
          },
        ],
        yAxis: [
          {
            //左侧柱状图的Y轴
            gridIndex: 0, //y轴所在的 grid 的索引
            splitLine: "none",
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              verticalAlign: "bottom",
              align: "left",
              padding: [2, 0, 8, 8],
              textStyle: {
                color: "rgba(0,0,0,0.9)",
                fontSize: "12px",
                fontWeight: "500",
              },
            },
            data: this.yData,
            inverse: true,
          },
          {
            //左侧柱状图的Y轴
            gridIndex: 0, //y轴所在的 grid 的索引
            splitLine: "none",
            axisTick: "none",
            axisLine: "none",
            data: this.xData,
            inverse: true,
            axisLabel: {
              show: true,
              verticalAlign: "bottom",
              align: "right",
              padding: [0, 8, 8, 0],
              textStyle: {
                color: " #2E77EA",
                fontSize: "12px",
                fontWeight: "500",
              },
              formatter: function (value) {
                return value + "次";
              },
              rich: {
                y: {
                  color: "#befbff",
                  fontSize: 16,
                },
                x: {
                  color: "#f6cf42",
                  fontSize: 16,
                },
              },
            },
          },
          {
            //左侧柱状图的Y轴
            gridIndex: 0, //y轴所在的 grid 的索引
            splitLine: "none",
            axisTick: "none",
            axisLine: "none",
            data: [],
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
            yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
            data: this.xData,
            barWidth: 8,
            itemStyle: {
              normal: {
                color: function (params) {
                  switch (params.dataIndex) {
                    case 0:
                      return "#FF7A0D";
                    case 1:
                      return "#FFDA3E";
                    case 2:
                      return "#FFDA3E";
                    default:
                      return "#3177EC";
                  }
                },
              },
            },
            z: 2,
          },
          {
            name: "外框",
            type: "bar",
            xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
            yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
            barGap: "-100%",
            data: [80, 80, 80, 80, 80], //对应的总数（条状长度）
            barWidth: 8,
            itemStyle: {
              normal: {
                // 条状的另一个颜色
                // color: "rgba(255,218,62,0.2)",
                // color: new echarts.graphic.LinearGradient(0, 0.5, 1, 0.5, [
                //   { offset: 0, color: "rgba(255,218,62,0.2)" },
                // ]),
                barBorderRadius: 6,
                position: [0, "80%"],
                color: function (params) {
                  switch (params.dataIndex) {
                    case 0:
                      return "rgba(255,122,13,0.2)";
                    case 1:
                      return "rgba(255,218,62,0.2)";
                    case 2:
                      return "rgba(255,218,62,0.2)";
                    default:
                      return "rgba(49,119,236,0.2)";
                  }
                },
              },
            },
            z: 0,
          },
        ],
      };
      var countEchartDom = this.$refs.countEchart;
      var myChart = echarts.init(countEchartDom);
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.bridgeCountBox {
  height: 400px;
  /* height: 100%; */
  width: 375px;
  border-radius: 8px 8px 0 0;
  margin-bottom: 10px;
}
</style>
